<%--
  Created by IntelliJ IDEA.
  User: waqwb
  Date: 2021/12/11
  Time: 19:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>用户注册 - 当当网</title>
    <%--
        1、更改路径显示 ，${pageContext.request.contextPath}是JSP取得绝对路径的方法，
        等价于<%=request.getContextPath()%>
     --%>
    <link href="${pageContext.request.contextPath }/css/login.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath }/css/page_bottom.css" rel="stylesheet" type="text/css"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 2、引入jQuery -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.5.0.min.js"></script>
</head>

<body>
<div class="login_top">
    <%--   更改路径显示 --%>
    <a href="booklist.html"><img class="logo" src="${pageContext.request.contextPath }/images/logo.gif"/> </a>
</div>
<div class="login_step">
    注册步骤:
    <span class="red_bold">1.填写信息</span> &gt; 2.注册成功
</div>
<div class="fill_message">
    <%--  3、更改form的action请求参数  --%>
    <form name="ctl00" method="post" action="${pageContext.request.contextPath }/register" id="form">
        <h2>
            以下均为必填项
        </h2>
        <table class="tab_login">
            <tr>
                <td valign="top" class="w1">
                    请填写您的Email地址：
                </td>
                <td>
                    <input type="text" name="email" id="email" class="text_input">
                    <div class="text_left" id="emailValidMsg">
                        <%--							<span>--%>
                        <%--								请填写有效的Email地址。--%>
                        <%--							</span>--%>
                        <span id="emailInfo" style="color: red"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top" class="w1">
                    设置您在当当网的昵称：
                </td>
                <td>
                    <input type="text" name="nickname" id="nickname" class="text_input">
                    <div class="text_left" id="nickNameValidMsg">
                        <%--                        <p>--%>
                        <%--                            请输入昵称。--%>
                        <%--                        </p>--%>
                        <span id="nicknameInfo" style="color: red"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top" class="w1">
                    设置密码：
                </td>
                <td>
                    <input type="password" name="password" id="password" class="text_input">
                    <div class="text_left" id="passwordValidMsg">
                        <%--                        <p>--%>
                        <%--                            请输入密码。--%>
                        <%--                        </p>--%>
                        <span id="passwordInfo" style="color: red"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top" class="w1">
                    再次输入您设置的密码：
                </td>
                <td>
                    <input type="password" id="repeatPassword" name="repeatPassword" class="text_input">
                    <div class="text_left" id="repeatPassValidMsg">
                        <span id="repeatPasswordInfo" style="color: red"></span>
                    </div>
                </td>
            </tr>
        </table>
        <div class="login_in">
            <input type="submit" id="btnClientRegister" class="button_1" value="注册">
        </div>
    </form>
</div>
<div>
    <hr style="height: 1px; width: 972px; color: #cfcfcf"/>
    <div class="b_left"></div>
    <div class="publish_bottom_message2">
        <div class="copyright">
            Copyright (C) 当当网 2004-2008, All Rights Reserved
        </div>
        <div class="validate">
            <%--   更改路径显示 --%>
            <a href="#http://www.hd315.gov.cn/beian/view.asp?bianhao=010202001051000098" target="_blank"> <img
                    src="${pageContext.request.contextPath }/images/validate.gif" border="0"/>
            </a>
            <p>
                <a href="" target="_blank">京ICP证041189号</a>
            </p>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        // 开关
        var isRightEmail = false;
        var isRightNickname = false;
        var isRightPassword = false;
        var isRightRepeatPassword = false;
        $("#email").blur(function () {
            var email = $("#email").val();
            if (email.length == 0) {
                $("#emailInfo").text("邮箱不能为空！");
                isRightEmail = false;
            } else {
                /*$("#emailInfo").text("");
                isRightEmail = true;*/
                $.ajax({
                    url: "${pageContext.request.contextPath }/checkEmail",
                    type: "post",
                    data: {"email": email},
                    success: function (result) {
                        // 返回标识为2时邮箱不可用
                        if (result == 2) {
                            $("#emailInfo").text("邮箱不可用！");
                            isRightEmail = false;
                        } else {
                            $("#emailInfo").text("邮箱可用");
                            isRightEmail = true;
                        }
                    }
                });
            }
        });


        $("#nickname").blur(function () {
            var nickname = $("#nickname").val();
            if (nickname.length == 0) {
                $("#nicknameInfo").text("昵称不能为空！");
                isRightNickname = false;
            } else {
                $("#nicknameInfo").text("");
                isRightNickname = true;
            }
        });

        $("#password").blur(function () {
            var password = $("#password").val();
            if (password == 0) {
                $("#passwordInfo").text("密码不能为空");
                isRightPassword = false;
            } else {
                $("#passwordInfo").text("");
                isRightPassword = true;
            }
        });


        $("#repeatPassword").blur(function () {
            var password = $("#password").val();
            var repeatPassword = $("#repeatPassword").val();
            if (repeatPassword == 0) {
                $("#repeatPasswordInfo").text("确认密码不能为空");
                isRightRepeatPassword = false;
            } else if (password == repeatPassword) {
                $("#repeatPasswordInfo").text("");
                isRightRepeatPassword = true;
            } else {
                $("#repeatPasswordInfo").text("重复密码不一致");
                isRightRepeatPassword = false;
            }
        });

        $("#registerBtn").click(function () {
            // 判断以上条件是否成立，成立提交表单
            if (isRightEmail && isRightNickname && isRightPassword && isRightRepeatPassword) {
                $("#form").submit();
            }
        });
    })
</script>
</html>
